<template>
  <div class="artist">
     <b-modal ref="myWarning1" hide-footer title="提示">
      <div class="d-block text-center">
        <h4>这是艺人最新专辑!</h4>
      </div>
    </b-modal>
	
	<b-modal ref="myWarning2" hide-footer title="提示">
      <div class="d-block text-center">
        <h4>这是艺人第一张专辑!</h4>
      </div>
    </b-modal>
	
    <br />
    <b-row align-v="center" align-h="center" style="margin: -5px; color: white;">
      <b-col cols="auto" style="margin-left:5px">
	    <div class="album-cover">
        <b-img thumbnail left :src="album.cover" :title="album.name" class="placeholder200" />
		<span v-if="album.recommend">
		  <div class="album-box"></div>
		  <div class="album-icon">
            <b-img :src="album.recommend.img" alt style="width:40px; height:40px"></b-img>
		  </div>  
        </span>
		</div>
      </b-col>
      <b-col
        class="content_album"
        style="margin:10px; font-family: Segoe UI, Microsoft Yahei, Verdana, Tahoma, Arial; font-size: 14px;"
      >
        <b-row>
          <b-col
            style="font-family: Segoe UI, Verdana, Microsoft Yahei, Tahoma, Arial; font-size: 20px; font-weight: bold; color: #70DCA6; margin-top: 5px;"
          >{{album.name}}</b-col>
        </b-row>
        <b-row>
          <b-col>
            <nobr>
              AllMusic评级：<img
                :src="`${album.rating_amg.img}`"
                :title="album.rating_amg.rate"
                style="width:75px; vertical-align:top; margin-top:3px"
                v-if="album.rating_amg"
              />
            </nobr>
          </b-col>
          <b-col>
            <nobr>
              本站评级：<img
                :src="`${album.rating_home.img}`"
                :title="album.rating_home.rate"
                style="width:75px; vertical-align:top; margin-top:3px"
                v-if="album.rating_home"
              />
            </nobr>
          </b-col>
          <b-col>
            <nobr>
              英国最高排名：<span v-if="album.chart_uk">{{album.chart_uk}}</span>
              <span v-else>—</span>
            </nobr>
          </b-col>
          <b-col>
            <nobr>
              美国最高排名：<span v-if="album.chart_us">{{album.chart_us}}</span>
              <span v-else>—</span>
            </nobr>
          </b-col>
        </b-row>
        <b-row>
          <b-col>
            <nobr>专辑类型：{{dict_album[album.category2]}}</nobr>
          </b-col>
		  <b-col>
            <nobr>发行日期：{{album.date}}</nobr>
          </b-col>
          <b-col>
            <nobr>发行公司：{{album.label}}</nobr>
          </b-col>
		  <b-col>
            <nobr>认证销量：<span v-if="album.sales">{{album.sales}}</span>
              <span v-else>—</span></nobr>
          </b-col>
        </b-row>
        <b-row>
          <b-col>
            专辑风格：<span v-for="(item,index) in album.styles" :key="index">
              <span v-if="index===album.styles.length-1">{{item}}</span>
              <span v-else>{{item}}&nbsp;&nbsp;/&nbsp;&nbsp;</span>
            </span>
          </b-col>
        </b-row>
        <b-row>
          <b-col>
            <a :href="album.link_douban" target="_blank">豆瓣链接<b-icon icon="link-45deg"></b-icon></a>
			&nbsp;&nbsp<a href="#" v-on:click="routerTo_last">        
			<b-icon icon="caret-left-fill"></b-icon>上张专辑
			</a>
			&nbsp;&nbsp<a href="#" v-on:click="routerTo_next">         
			下张专辑<b-icon icon="caret-right-fill"></b-icon>
			</a>
          </b-col>
        </b-row>
        <b-row style="margin-bottom: 0px;"></b-row>
      </b-col>
    </b-row>
    <br />
    <div class="content_album" v-if="album.awards.length > 0">
      <b-row>
        <b-col style="font-size: 18px; color: #70DCA6; margin-top: 3px;">专辑荣誉</b-col>
      </b-row>
      <b-row
        v-for="(item,index) in album.awards"
        :key="index"
        style="font-family: Segoe UI, Microsoft Yahei, Verdana, Tahoma, Arial; font-size: 14px; color: white; margin-bottom: 1px;"
      >
        <router-link target="_blank"
            :to="{path: '/albumsearch/', query: {awards: `${item}`}}"
          >
		<b-col cols="auto">{{index+1}}.&nbsp;&nbsp;{{item}}<b-icon icon="link-45deg"></b-icon></b-col>
		</router-link>
      </b-row>
      <b-row style="margin-bottom: 3px;"></b-row>
    </div>
    <br />
    <div class="content_album" v-if="album && album.review && album.review.length > 0">
      <b-row>
        <b-col style="font-size: 18px; color: #70DCA6; margin-top: 10px;">专辑评论</b-col>
      </b-row>
      <b-row>
        <b-col
          style="font-family: Segoe UI, Microsoft Yahei, Verdana, Tahoma, Arial; font-size: 14px; color: white; line-height: 22px; text-align:justify"
        >
          <div v-html="album.review">{{album.review}}</div>
        </b-col>
      </b-row>
    </div>
    <br />
    <div v-if="songList">
      <b-table
        :striped="striped"
        :bordered="bordered"
        :outlined="outlined"
        :small="small"
        :hover="hover"
        :dark="dark"
        :fixed="fixed"
        :foot-clone="footClone"
        :head-variant="light"
        :items="songList"
        :fields="fields"
        style="font-family: Segoe UI, Microsoft Yahei, Verdana, Tahoma, Arial; font-size: 14px; background-color: rgba(0,0,0,0.8)"
        v-if="songList != undefined && songList != null  && songList.length > 0"
      >
        <template v-slot:cell(recommend.img)="data">
          <span v-if="data.value">
            <img
              :src="`${data.value}`"
              alt
              style="height:18px; padding-left:5px; padding-bottom:3px"
            />
          </span>
        </template>
        <template v-slot:cell(sequence)="data">{{data.value}}</template>
        <template v-slot:cell(name)="data">{{data.value}}</template>
		<template v-slot:cell(chart_uk)="data">
			<span v-if="data.value">{{data.value}}</span>
			<span v-else>-</span>
		</template>
		<template v-slot:cell(chart_us)="data">
			<span v-if="data.value">{{data.value}}</span>
			<span v-else>-</span>
		</template>
        <!--<template v-slot:cell(link_music)="data">
          <span v-if="data.value">
            <a :href="data.value" target="_blank">试听</a>
          </span>
        </template>
        <template v-slot:cell(link_video)="data">
          <span v-if="data.value">
            <a :href="data.value" target="_blank">视频</a>
          </span>
        </template>-->
      </b-table>
    </div>
    <br />
    <br />
    <br />
    <br />
    <br />
  </div>
</template>

<script>
export default {
  async asyncData(context) {
      let [request1Data, request2Data] = await Promise.all([
        context.$axios.get('/api/albums-detail/', { params: { name: context.route.query.name, artist: context.route.params.name, category: context.route.query.category, showLoading: false } }),
        context.$axios.get('/api/songs/', { params: { album: context.route.query.name, showLoading: false } }),
      ]).catch(err => {
        console.log(err);
      });
      return {
        album: request1Data.data,
        songList: request2Data.data,
      };
  },
  props: {
    artist_name_parent: String,
  },
  data() {
    return {
      category: this.$route.query.category,
      artist_alias: this.$route.params.name,
      artist: '',
      artist_name: '',
      style: '',
      styleListIndex: [],
      //songList: [],
	  //album: '',
	  album_last: '',
	  album_next: '',
      fields: [
        {
          key: 'recommend.img',
          label: '推荐',
        },
        {
          key: 'sequence',
          label: '序号',
        },
        {
          key: 'name',
          label: '曲名',
        },
        {
          key: 'chart_uk',
          label: '英国单曲排名',
		  class: 'text-center',
        },
		{
          key: 'chart_us',
          label: '美国单曲排名',
		  class: 'text-center',
        },
      ],
      striped: false,
      bordered: false,
      outlined: false,
      small: true,
      hover: true,
      dark: true,
      fixed: false,
      footClone: false,
      light: 'light',
	  dict_album: { studio: '录音室专辑', live: '现场专辑', compilation: '精选专辑', ep: 'EP', single: '单曲', video: '录影带' },
    };
  },
  methods: {
    showAlbum() {
      this.$axios
        .get('/api/albums-detail/', { params: { name: this.$route.query.name, artist: this.artist_alias, showLoading: false } })
        .then(response => {
          var res = response.data;
          this.album = res;
          this.$route.meta.title = this.album.name + ' | ' + this.album.artist.name;
          document.title = this.$route.meta.title;
        })
        .catch(err => {
          console.log(err);
        });
    },
    showAlbumLast() {
      this.$axios
        .get('/api/albums-last/', { params: { artist: this.artist_alias, date: this.album.date, showLoading: false } })
        .then(response => {
          var res = response.data;
          this.album_last = res;
        })
        .catch(err => {
          console.log(err);
        });
    },
    showAlbumNext() {
      this.$axios
        .get('/api/albums-next/', { params: { artist: this.artist_alias, date: this.album.date, showLoading: false } })
        .then(response => {
          var res = response.data;
          this.album_next = res;
        })
        .catch(err => {
          console.log(err);
        });
    },
    showArtist() {
      this.$axios
        .get('/api/artists-detail/', { params: { artist: this.$route.params.name, showLoading: false } })
        .then(response => {
          var res = response.data;
          this.artist = res;
          this.$route.meta.title = this.album.name + ' | ' + this.artist.name;
          document.title = this.$route.meta.title;
        })
        .catch(err => {
          console.log(err);
        });
    },
    showSongs() {
      if (this.category != 'video') {
        this.$axios
          .get('/api/songs/', { params: { album: this.$route.query.name, showLoading: false } })
          .then(response => {
            var res = response.data;
            this.songList = res;
            this.items = res;
          })
          .catch(err => {
            console.log(err);
          });
      }
    },
    showStyle(item) {
      this.$axios
        .get('/api/styles/', { params: { name: item, showLoading: false } })
        .then(response => {
          var res = response.data;
          this.style = res;
        })
        .catch(err => {
          console.log(err);
        });
      return this.style.name;
    },
	routerTo_next: function() {
	   this.$axios
        .get('/api/albums-next/', { params: { artist: this.artist_alias, date: this.album.date, showLoading: false } })
        .then(response => {
          var res = response.data;
          this.album_next = res;
		  if (res.name) {
		    this.$router.push({
               path: '/artist/'+this.album_next.artist.alias+'/album', query: {name:this.album_next.alias}
            });
		  } else {
		      this.$refs.myWarning1.show();
		  }
        })
        .catch(err => {
          console.log(err);
        });
    },
	routerTo_last: function() {
	   this.$axios
        .get('/api/albums-last/', { params: { artist: this.artist_alias, date: this.album.date, showLoading: false } })
        .then(response => {
          var res = response.data;
          this.album_last = res;
		  if (res.name) {
		    this.$router.push({
               path: '/artist/'+this.album_last.artist.alias+'/album', query: {name:this.album_last.alias}
            });
		  } else {
		      this.$refs.myWarning2.show();
		  }
        })
        .catch(err => {
          console.log(err);
        });
    },
  },
  head() {
    return {
      title: this.album.name + ' | ' + this.album.artist.name,
    };
  },
  mounted: function() {
    this.$parent.hide_tooltip1();
    this.$store.dispatch('hideloader');
    //this.showArtist();
    //this.showAlbum();
    //this.showSongs();
    this.showAlbumLast();
	this.showAlbumNext();
    this.$route.meta.title = this.album.name + ' | ' + this.album.artist.name;
    document.title = this.$route.meta.title;
  },
  watch: {
    $route(to, from) {
      //(this.album = ''), (this.songList = []), (this.artist_alias = this.$route.params.name), (this.category = this.$route.query.category), 
	  this.$parent.hide_tooltip1();
	  this.showAlbum();
      this.showSongs();
	  //this.album_last = '';
	  //this.album_next = '',
      //this.showAlbumLast();
	  //this.showAlbumNext();
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.content_album {
  font-size: 15px;
  padding: 0px;
  margin: 0px;
  background-color: rgba(0, 0, 0, 0.8);
  border-style: inset;
}

.content_album .row {
  padding: 5px;
  margin-right: 5px;
  margin-left: 5px;
}

.album-icon {
    left: 16px;
    bottom: 1px;
    position: absolute;
}

.album-box{
	left: 15px;
	bottom: 1px;
	position: absolute;
	width: 0;
	height: 0;
	border: 35px solid;
	border-left-color: #F0FFF0;
	border-right-color: transparent;
	border-top-color: transparent;
	border-bottom-color: #F0FFF0;
 }
 
.placeholder200 {
    width: 200px;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(~@/assets/img/background/album_300x300.png);
}


</style>

<!--<style src="../../../assets/css/global.css"></style>

